<template>
	<view class="contnet">
		<view class="mplist" v-for="(el,ind) in datas"  @click="gotodetail(ind)">
			<view class="tourlist-item-icon">
				<image mode="aspectFill" :src="el.typeImg" hover="false"></image>
			</view>
			<view class="tourlist-item-content">
				<view class="tourlist-item-name">
					{{el.name}}
					<view class="xj" v-if="el.level!=0">{{el.level}}星</view>
				</view>
				<view class="tourlist-item-con">
					{{el.address}}
				</view>
				<view class="tourlist-bottom">
					<text class="tourlist-item-distance">距您{{el.distance}}</text>
					<view class="tourlist-item-price" v-if="el.price > 0">
						<text class="tip">均价</text>
						<text class="fh">￥</text>
						<text class="jg">{{el.price}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:['datas'],
		data(){
			return{
				allList:[]
			}
		},
		created() {
			
		},
		mounted() {
			this.allList=this.datas;
		},
		methods:{
			gotodetail(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	.mplist {
		display: flex;
		clear: both;
		position: relative;
		box-sizing: border-box;
		width: 710rpx;
		color: #BCBCBC;
		margin: 12rpx 20rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 9rpx rgba(0, 0, 0, 0.05);
	}
	.tourlist-item-icon {
		width: 220rpx;
		height: 220rpx;
	}
	
	.tourlist-item-icon image {
		width: 100%;
		height: 100%;
	}
	
	.tourlist-item-content {
		margin: 15rpx 0rpx 0rpx 30rpx;
	}
	
	.tourlist-item-name {
		width: 100%;
		height: 36rpx;
		color: rgba(42, 42, 42, 1);
		font-size: 30rpx;
		line-height: 36rpx;
		font-weight: 600;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.tourlist-item-name .xj {
		width: 58rpx;
		height: 33rpx;
		line-height: 33rpx;
		text-align: center;
		background: #FFF1EB;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-family: DIN;
		font-weight: bold;
		color: #FF540B;
		margin-left: 14rpx;
	}
	
	.tourlist-item-distance {
		font-size: 22rpx;
		color: rgba(151, 151, 151, 1);
		margin-top: 10rpx;
	}
	
	.tourlist-item-level {
		width: 100%;
		margin: 20rpx 0 0 0;
	
	}
	
	.star-image {
		width: 36rpx;
		height: 36rpx;
	}
	
	.tourlist-bottom {
		display: flex;
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		height: 30rpx;
	}
	
	.tourlist-item-con {
		max-width: 415rpx;
		background: #F0F6FC;
		border-radius: 6rpx;
		color: rgba(111, 140, 208, 1);
		font-size: 22rpx;
		line-height: 35rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 22upx;
		padding: 0 10rpx;
	}
	
	.tourlist-item-price {
		color: #FC820B;
		font-size: 30rpx;
		/* position: absolute; */
		text-align: center;
		/* right: 30rpx;
		bottom: 0; */
		flex: row;
		display: flex;
		align-items: baseline;
		margin-top: 15rpx;
	}
	
	.tourlist-item-price .tip {
		color: rgba(119, 119, 119, 1);
		font-size: 25rpx;
	}
	
	.tourlist-item-price .fh {
		color: rgba(255, 84, 11, 1);
		font-size: 25rpx;
	}
	
	.tourlist-item-price .jg {
		color: rgba(255, 84, 11, 1);
		font-size: 42rpx;
		line-height: 42rpx;
		font-weight: bold;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
